<template> 
  <div>
    <div class="buju">
  <div class="card">
    <div class="first-content">
      <span class="wenzi1">已连接设备总数</span>
      <img src="@/assets/科技.png" class="myIcon" alt="My Icon" />
    </div>
    <div class="second-content">
      <span class="wenzi2">{{ stats.total_devices }}台</span>
    </div>
  </div>
  <div class="card">
    <div class="first-content">
      <span class="wenzi1">未连接设备总数</span>
      <img src="@/assets/设备2.png" class="myIcon" alt="My Icon" />
    </div>
    <div class="second-content">
      <span class="wenzi2">{{ stats.total_undevices}}台</span>
    </div>
  </div>
  <div class="card">
    <div class="first-content">
      <span class="wenzi1">节省能耗时长</span>
      <img src="@/assets/能耗.png" class="myIcon" alt="My Icon" />
    </div>
    <div class="second-content">
      <span class="wenzi2">{{ stats.today_usage_time }}小时</span>
    </div>
  </div>
  </div>
      <div class="sbgl">
        <div class="jnan">
        <button class="button" :class="{ active: isEcoModeOn }" @click="toggleEcoMode">  
          节能模式 
        </button>  
        <button class="button" :class="{ active: isCircuitBreakerOn }" style="margin-top: 50px;" @click="toggleCircuitBreaker">断路器开关</button>
      </div>
      <div class="redes">
        <!-- 实验室选择，点击时更新当前选中的实验室状态 -->
        <a 
          v-for="lab in labs" 
          :key="lab.id" 
          class="shiyanshi" 
          :class="{ active: lab.isActive }"
          @click="selectLab(lab)">
          {{ lab.name }}
        </a>
      </div>
      <div class="buju2">
    <div class="row">
      <div 
        v-for="(device, index) in devices.slice(0, 2)" 
        :key="index" 
        class="switch-container"
        style="flex: 1; margin-right: 10px;"
      >
        <img v-if="index === 0" src="@/assets/风扇.png" class="icon"/>
        <img v-if="index === 1" src="@/assets/空调.png" class="icon"/>
        <label class="switch">
          <input 
            type="checkbox" 
            :checked="selectedLabStatus[device.type]" 
            @change="toggleDeviceStatus(device.type, $event)"
          />
          <span class="slider"></span>
        </label>
      </div>
    </div>
    <div class="data-container">
      <div class="data-item">
      <span class="data-label">电压:</span>
      <span class="data-value">{{ formattedVoltage }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div class="data-item">
      <span class="data-label">电流:</span>
      <span class="data-value">{{ formattedCurrent }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
    <div class="data-item">
      <span class="data-label">功率:</span>
      <span class="data-value">{{ formattedPower }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
  </div>
    <div class="row">
      <div 
        v-for="(device, index) in devices.slice(2, 4)" 
        :key="index" 
        class="switch-container"
        style="flex: 1; margin-left: 10px;"
      >
      <img v-if="index === 0" src="@/assets/照明灯.png" class="icon"/>
      <img v-if="index === 1" src="@/assets/电脑 (1).png" class="icon"/>
        <label class="switch">
          <input 
            type="checkbox" 
            :checked="selectedLabStatus[device.type]" 
            @change="toggleDeviceStatus(device.type, $event)"
          />
          <span class="slider"></span>
        </label>
      </div>
    </div>
  </div>
    </div>
    </div>
    </template>  
      
    <script>
    import { EventBus } from '@/main'; // 导入事件总线
    import { reactive, onMounted } from 'vue';
    import axios from 'axios';
    import { fetchAccessToken } from './token';
    import { fetchPowerData } from './power-situation';
    import { fetchSwitchData } from './switch-situation';
    import { BreakerSwitch } from './switch';
    export default {
    name: 'LabBox',
    setup() {
    const stats = reactive({});

    const fetchStats = async () => {
      try {
        const response = await axios.get('/api/stats');
        for (const key in response.data) {
      stats[key] = isNaN(response.data[key]) ? response.data[key] : Number(response.data[key]);
    }
      } catch (error) {
        console.error("Error fetching stats: ", error);
      }
    };
    onMounted(() => {
      fetchStats();
    });
    return {
      stats,
    };
  },
    data() {
      return {
        isEcoModeOn: false, // 节能模式开关状态
        selectedLab: null, // 当前选中的实验室
        ecoModeStartTime: null, // 节能模式开始时间的时间戳
        ecoModeInterval: null, // 节能模式时长更新的定时器
        ecoModeBlocking: false,//用于阻止节能模式下的状态更新
        currentTemperature: 21, // 添加这个属性来存储当前温度
        isCircuitBreakerOn: false, // 断路器初始状态设为false（关）
        labs: [
          { id: 215, name: '实验室215', status: { fan: false, ac: false, light: false, computer: false }, isActive: false },
          { id: 216, name: '实验室216', status: { fan: false, ac: false, light: false, computer: false }, isActive: false },
          { id: 225, name: '实验室225', status: { fan: false, ac: false, light: false, computer: false }, isActive: false },
          { id: 226, name: '实验室226', status: { fan: false, ac: false, light: false, computer: false }, isActive: false }
        ],
        devices: [
          { type: 'fan'},
          { type: 'ac'},
          { type: 'light'},
          { type: 'computer'}
        ],
        voltage: '数据加载中...', // 初始显示为加载中
        current: '数据加载中...',
        power: '数据加载中...',
      intervalId: null, // 用于存储定时器的 ID

      };
      
    },
    
    computed: {
      formattedVoltage() {
    return this.voltage + 'V';
  },
  formattedCurrent() {
    return this.current + 'A';
  },
  formattedPower() {
    return this.power + 'W';
  },

      selectedLabStatus() {
        const lab = this.selectedLab || this.labs.find(lab => lab.isActive);
        return this.selectedLab ? this.selectedLab.status : { fan: false, ac: false, light: false, computer: false },
        lab
        ? {
            voltage: lab.status.voltage || '数据加载中...',
            current: lab.status.current || '数据加载中...',
            power: lab.status.power || '数据加载中...',
            ...lab.status // 保留原有设备状态
          }
        : { voltage: 'N/A', current: 'N/A', power: 'N/A' };
      }
    },
    methods: {
      async fetchPowerDataPeriodically() {
      const accessToken = await fetchAccessToken();
      try {
        await this.updatePowerData(accessToken);
        // 设置定时器
        this.intervalId = setInterval(async () => {
          await this.updatePowerData(accessToken);
        }, 1000);
        this.intervalId = setInterval(async () => {
          await this.updateSwitchData(accessToken);
        }, 5000);
      } catch (error) {
        console.error('Error setting up periodic power data fetch:', error);
        // 可以在这里设置电压、电流和功率为 'N/A' 或其他错误信息
        this.voltage = 'N/A';
        this.current = 'N/A';
        this.power = 'N/A';
      }
    },
    async updatePowerData(accessToken) {
      try {
        const powerData = await fetchPowerData(accessToken);
        if (powerData) {
          this.voltage = powerData.voltage;
          this.current = powerData.current;
          this.power = powerData.power;
        } else {
          throw new Error('No power data received');
        }
      } catch (error) {
        console.error('Error fetching power data:', error);
        // 可以选择在这里更新状态为 'N/A' 或其他错误信息
        this.voltage = 'N/A';
        this.current = 'N/A';
        this.power = 'N/A';
      }
    },
    async updateSwitchData(accessToken) {
      try {
        const switchData = await fetchSwitchData(accessToken);
        this.isCircuitBreakerOn = switchData;
      } catch (error) {
        console.error('Error fetching switch data:', error);
        // 可以选择在这里更新状态为 'N/A' 或其他错误信息
        
        
      }
    },
    async toggleCircuitBreaker() {
      const accessToken = await fetchAccessToken();
      try {
         BreakerSwitch(accessToken,this.isCircuitBreakerOn);
        
      } catch (error) {
        console.error('Error fetching switch data:', error);
        // 可以选择在这里更新状态为 'N/A' 或其他错误信息
        
        
      }
    this.isCircuitBreakerOn = !this.isCircuitBreakerOn;

    // 这里添加你的开关逻辑实现
  },

      /*节能模式逻辑
      function setAirConditionerTemperature(temperature) {
    // 发送指令到空调系统，设置目标温度
}

function turnOffLights(percentage) {
    // 关闭指定百分比的照明灯
}

function reduceDevicePower(device, powerLevel) {
    // 将设备（如电脑、风扇等）的功率调整到新的级别
}

// 假设存在以下传感器和时间函数
function getCurrentTime() {
    // 返回当前时间
}

function getOutsideTemperature() {
    // 返回当前室外温度
}

function isRoomOccupied() {
    // 通过传感器检测房间是否被占用
}

// 根据时间调节空调温度
function adjustACTemperatureByTime() {
    const hour = getCurrentTime().getHours();
    if (hour >= 7 && hour < 18) { // 白天工作时间
        setAirConditionerTemperature(24); // 工作时设置为24度
    } else { // 夜间或非工作时间
        setAirConditionerTemperature(26); // 非工作时设置为26度
    }
}

// 根据外界温度调节空调温度
function adjustACTemperatureByOutsideTemperature() {
    const outsideTemp = getOutsideTemperature();
    if (outsideTemp < 25) {
        setAirConditionerTemperature(26); // 室外温度较低时，调高室内温度
    } else {
        setAirConditionerTemperature(24); // 室外温度较高时，保持正常温度
    }
}

// 根据时间关闭照明灯
function turnOffLightsAtNight() {
    const hour = getCurrentTime().getHours();
    if (hour >= 18 || hour < 7) { // 夜间或清晨
        turnOffLights(100); // 关闭所有照明灯
    }
}

// 根据房间占用情况调节设备
function adjustDevicesByOccupancy() {
    if (!isRoomOccupied()) {
        turnOffLights(100); // 房间无人时关闭所有照明灯
        reduceDevicePower('computer', 20); // 降低电脑功率
        setAirConditionerTemperature(26); // 关闭空调
    } 
}

// 节能模式下的设备管理
function ecoModeManagement() {
    adjustACTemperatureByTime();
    adjustACTemperatureByOutsideTemperature();
    adjustDevicesByOccupancy();
    turnOffLightsAtNight();
} */
updateTemperature() {
  // 根据实际情况获取温度数据
  this.adjustAirConditionerBasedOnTemperature();
},
setAirConditionerStatus(isOn) {
  if (this.selectedLab) {
    if (this.selectedLab.status.ac !== isOn) {
      this.selectedLab.status.ac = isOn;
      this.saveLabStatus(this.selectedLab);
      EventBus.$emit('deviceStatusChanged', {
        labId: this.selectedLab.id,
        deviceType: 'ac',
        isChecked: isOn
      });
    }
  }
},
isNightTime() {
    const now = new Date();
    return now.getHours() < 6;
  },
isDayTime() {
    const now = new Date();
    // 假设白天是早上6点到晚上6点
    return now.getHours() >= 6 && now.getHours() < 18;
  },
  turnOffAllDevices() {
  this.labs.forEach(lab => {
    Object.keys(lab.status).forEach(deviceType => {
      lab.status[deviceType] = false;
    });
    this.saveLabStatus(lab);
  });
},
adjustAirConditionerBasedOnTemperature() {
    if (this.isEcoModeOn) {
      const lowerBound = 22; // 低于这个温度就关闭空调
      //const upperBound = 24;  高于这个温度就可以手动开启空调
      // 如果当前温度低于22度，关闭空调
      if (this.currentTemperature < lowerBound) {
        this.setAirConditionerStatus(false);
      }
      // 如果当前温度高于或等于24度，允许用户根据需要开启或关闭空调
    }
  },
      toggleEcoMode() {
  this.isEcoModeOn = !this.isEcoModeOn;
  this.ecoModeBlocking = this.isEcoModeOn;
  if (this.isEcoModeOn) {
      // 节能模式开启，记录开始时间
      this.ecoModeStartTime = Date.now();
      if (this.selectedLab && this.selectedLab.status.ac) {
      // 空调是开启的
      if (this.currentTemperature < 22) {
        // 温度低于22度，关闭空调
        this.setAirConditionerStatus(false);
      }
    }
      if (this.isDayTime()) {
      this.labs.forEach(lab => {
        lab.status.light = false; // 关闭照明灯
        this.saveLabStatus(lab);
      });
    }
    if (this.isNightTime()) {
      this.turnOffAllDevices();
    }
    // 调整空调状态
    this.adjustAirConditionerBasedOnTemperature();
      if (this.ecoModeInterval) {
        clearInterval(this.ecoModeInterval);
      }
      // 启动定时器，每分钟更新时长
      this.ecoModeInterval = setInterval(() => {
        if (this.isEcoModeOn) {
        this.updateTodayUsageTime();
      }
      }, 60000);
    } else {
      // 节能模式关闭，计算并累加时长
      if (this.ecoModeStartTime) {
        clearInterval(this.ecoModeInterval);
        this.ecoModeInterval = null;
      }
      // 清除定时器
      if (this.ecoModeStartTime) {
      const durationInMs = Date.now() - this.ecoModeStartTime;
      const durationInHours = durationInMs / 3600000; // 转换为小时
      this.updateTodayUsageTime(durationInHours); // 传入正确的时长
    }
      this.ecoModeStartTime = null; // 重置开始时间
    }
  this.saveEcoModeStatus(this.isEcoModeOn); // 保存状态到localStorage
  EventBus.$emit('ecoModeChanged', this.isEcoModeOn); // 发出事件
},
updateTodayUsageTime(durationInHours) {
  if (typeof durationInHours === 'number' && !isNaN(durationInHours)) {
    // 将当前的 today_usage_time 转换为数字，如果转换失败则使用 0
    let currentUsageTime = parseFloat(this.stats.today_usage_time) || 0;
    // 计算新的时长并保留两位小数
    let newUsageTime = (currentUsageTime + durationInHours).toFixed(2);
    // 更新 today_usage_time
    this.stats.today_usage_time = newUsageTime;
  } else {
    console.error('Invalid argument passed to updateTodayUsageTime, expected a number.');
  }
  },
      saveEcoModeStatus(isEcoModeOn) {
  localStorage.setItem('ecoModeStatus', isEcoModeOn.toString());
},
setDefaultLab() {
    // 找到实验室215
    const defaultLab = this.labs.find(lab => lab.id === 215);
    if (defaultLab) {
      // 重置所有实验室的激活状态
      this.labs.forEach(lab => (lab.isActive = false));
      // 设置实验室215为激活状态
      defaultLab.isActive = true;
      this.selectedLab = defaultLab; // 更新当前选中的实验室
      this.loadLabStatus(defaultLab); // 加载实验室215的状态
    }
  },
      selectLab(lab) {
        // 重置所有实验室的激活状态
        this.labs.forEach(l => (l.isActive = false));
        // 设置当前选中实验室为激活状态
        lab.isActive = true;
        this.selectedLab = lab; // 更新当前选中的实验室
        this.loadLabStatus(lab);
      },
      toggleDeviceStatus(deviceType, event) {
        const isChecked = event.target.checked;
        const now = new Date();
// 如果当前是夜间时间段，不允许开启任何设备
if (this.isEcoModeOn && this.isNightTime(now)) {
    alert("当前为节能模式下的夜间时段，无法更改设备状态。");
    event.target.checked = !isChecked; // 重置复选框状态以匹配 UI
    return;
  }
  if (deviceType === 'ac' && this.isEcoModeOn) {
    // 检查当前温度是否低于22度
    if (this.currentTemperature < 22) {
      alert("当前温度低于22度，无法开启空调。");
      event.target.checked = false; // 重置复选框状态以匹配 UI
      return; // 阻止进一步执行
    }
    // 如果温度22度或更高，则允许开启空调
  }
    // 如果节能模式开启且尝试打开照明灯，则阻止更改
    if (deviceType === 'light' && this.isEcoModeOn) {
    // 如果当前是白天时间段，不允许在节能模式下开启照明灯
    if (this.isDayTime(now)) {
      alert("当前为白天时间段，无法在节能模式下打开照明灯。");
      event.target.checked = false; // 重置复选框状态以匹配 UI
      return;
    }
    // 如果不在白天时间段，允许开启照明灯（即使节能模式开启）
  }

    // 更新设备状态
    this.selectedLab.status[deviceType] = isChecked;
    this.saveLabStatus(this.selectedLab);
    EventBus.$emit('deviceStatusChanged', {
      labId: this.selectedLab.id,
      deviceType,
      isChecked
    });
  },
      saveLabStatus(lab) {  
      // 保存实验室的所有设备状态  
      Object.keys(lab.status).forEach(deviceType => {  
        localStorage.setItem(`lab_${lab.id}_${deviceType}`, lab.status[deviceType].toString());  
      });  
    },  
    loadLabStatuses() {  
      // 加载所有实验室的初始状态  
      this.labs.forEach(lab => {  
        this.loadLabStatus(lab);  
      });  
    },  
    loadLabStatus(lab) {  
      // 加载特定实验室的状态  
      Object.keys(lab.status).forEach(deviceType => {  
        const status = localStorage.getItem(`lab_${lab.id}_${deviceType}`);  
        if (status !== null) {  
          lab.status[deviceType] = status === 'true';  
        }  
      });  
    } 
    },
    mounted() {  
      this.fetchPowerDataPeriodically();
      setInterval(() => this.updateTemperature(), 300000);
    const savedEcoModeStatus = localStorage.getItem('ecoModeStatus');  
    this.isEcoModeOn = savedEcoModeStatus === 'true' ? true : false;  
    if (this.isEcoModeOn) {
    // 如果页面加载时节能模式已经是开启状态，记录开始时间
    this.ecoModeStartTime = Date.now();
    // 如果页面加载时节能模式已经是开启状态
    if (this.selectedLab && this.selectedLab.status.ac && this.currentTemperature < 22) {
      // 空调是开启的且温度低于22度，关闭空调
      this.setAirConditionerStatus(false);
    }
    // 启动定时器
    this.ecoModeInterval = setInterval(() => {
      if (this.isEcoModeOn) {
        this.updateTodayUsageTime(); // 这里不需要传参，因为我们只是检查节能模式是否开启
      }
    }, 60000);
  }

    this.loadLabStatuses();
    // 设置默认选中实验室215
    this.setDefaultLab();
  
    // 监听节能模式变化的事件  
    EventBus.$on('ecoModeChanged', (isEcoModeOn) => {  
      this.isEcoModeOn = isEcoModeOn;  
      this.saveEcoModeStatus(isEcoModeOn); 
    });  
    EventBus.$on('deviceStatusChanged', () => {  
    }); 
    // 组件加载时检查是否在夜间时间段，如果是，则关闭所有设备
  if (this.isNightTime()) {
    this.labs.forEach(lab => {
      Object.keys(lab.status).forEach(deviceType => {
        lab.status[deviceType] = false; // 关闭设备
        this.saveLabStatus(lab); // 保存状态
      });
    });
  }
  }, 
  beforeUnmount() {
  // 组件销毁前清除定时器
  if (this.ecoModeInterval) {
    clearInterval(this.ecoModeInterval);
  }
},
onUnmounted() {
  EventBus.$off('ecoModeChanged', this.toggleEcoMode);
  if (this.intervalId) {
      clearInterval(this.intervalId); // 清除定时器
    }
},
  }; 
    </script>  
    <style scoped>  
    
  .button.active {  
    background-color: mediumspringgreen;/* 节能模式按钮激活时的背景色 */
    color: rgb(75, 64, 64);
  }  
  .button {
    box-sizing: border-box;
    height: 60px;
    width: 60px;
    all: unset;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.6em 2em;
    border: mediumspringgreen solid 0.15em;
    border-radius: 0.25em;
    color: mediumspringgreen;
    font-size: 1.5em;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: border 300ms, color 300ms;
    user-select: none;
    justify-content: center;
  }
  .button p {
    z-index: 1;
  }
  .button:hover {
    color: #212121;
  }
  .button:active {
    border-color: teal;
  }
  .button::after, .button::before {
    content: "";
    position: absolute;
    width: 9em;
    aspect-ratio: 1;
    background: mediumspringgreen;
    opacity: 50%;
    border-radius: 50%;
    transition: transform 500ms, background 300ms;
  }
  .button::before {
    left: 0;
    transform: translateX(-8em);
  }
  .button::after {
    right: 0;
    transform: translateX(8em);
  }
  .button:hover:before {
    transform: translateX(-1em);
  }
  .button:hover:after {
    transform: translateX(1em);
  }
  .button:active:before,
  .button:active:after {
    background: teal;
  } 
  
  
  .card {
    width: 190px;
    height: 240px;
    background: rgb(0, 163, 251);
    transition: all 0.4s;
    border-radius: 10px;
    font-size: 30px;
    font-weight: 900;
    flex:1 1 0;
    margin: 12px;
  }
  
  .card:hover {
    border-radius: 15px;
    cursor: pointer;
    transform: scale(1.05);
    background: rgb(49, 157, 245);
  }
  
  .first-content {
    height: 100%;
    width: 100%;
    transition: all 0.4s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    border-radius: 15px;
  }
  
  .card:hover .first-content {
    height: 0px;
    opacity: 0;
  }
  
  .second-content {
    height: 0%;
    width: 100%;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    transition: all 0.4s;
    font-size: 0px;
    transform: rotate(90deg) scale(-1);
  }
  
  .card:hover .second-content {
    opacity: 1;
    height: 100%;
    font-size: 0.5rem;
    transform: rotate(0deg);
  }
  .buju {  
    display: flex; /* 启用 Flexbox 布局 */  
    justify-content: space-between; /* 使子元素在主轴上均匀分布 */  
    align-items: center; /* 垂直居中子元素（如果需要） */  
    border-bottom:2px solid rgb(1, 168, 252);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  } 
  .wenzi1{
    font-size: 20px;
    color: rgb(88, 244, 228);
  }
  .wenzi2{
    font-size: 30px;
    color: rgb(221, 244, 236);
  }
  .shiyanshi{
    font-size: 15px;
    color: rgba(0, 253, 228, 0.752)
  }
  .myIcon{
    width: 50px;
    height: 50px;
  }
  .redes {
    width: 100px;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-top: 45px;
    border-left: 2px solid rgb(0, 145, 255);
    border-top: 2px solid rgb(0, 145, 255);
    border-bottom: 2px solid rgb(0, 145, 255);
  }
  
  .redes a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    transition: all 0.2s ease-in-out;
  }
  
  .redes .shiyanshi {
    background-color: #2db8f9;
  }
  
  .redes a:hover {
    width: 130%;
    border-radius: 0 10px 10px 0;
  }
  /* The switch - the box around the slider */
  .switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(182, 182, 182);
    transition: .4s;
    border-radius: 10px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 8px;
    left: 0.3em;
    bottom: 0.3em;
    transform: rotate(270deg);
    background-color: rgb(255, 255, 255);
    transition: .4s;
  }
  
  .switch input:checked + .slider {
    background-color: #21cc4c;
  }
  
  .switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  .switch input:checked + .slider:before {
    transform: translateX(1.5em);
  }
  
  
  .switch-container {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    /* 你可以在这里添加边框、圆角等样式 */  
    border: 1px solid #ccc;  
    border-radius: 10px;  
    height: 120px;
    width: 120px;
    padding:10px;
    margin:10px; 
    flex:1;
    margin-top: 45px;
  }  
     
    
  .icon {   
    height:50px;
    width: 50px;
    font-size: 24px;
    margin-bottom: 10px;
  }  
  
  
  
  .sbgl {  
    display: flex;  
    justify-content: space-between; /* 左侧和右侧留有空间 */  
    align-items: flex-start; /* 垂直对齐方式，根据需要调整 */ 
  }
  .buju2 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .buju3 {  
    display: flex;  
    justify-content: space-between; /* 水平方向两端对齐 */  
    margin-bottom: 10px; /* 根据需要添加下外边距 */  
  }  
    
  .buju3:last-child {  
    margin-bottom: 0; /* 去除最后一个switch-group的下外边距 */  
  } 
  
  
  .redes a.active {
    background-color: rgb(0, 108, 250); /* 实验室激活时的背景色 */
  }
  
  .row {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .jnan{
    display: flex;
    margin-top: 150px;
    flex-direction: column;
  }
  .data-container {
  display: flex;
  justify-content: space-around;
  margin-top: 4px; /* 根据需要调整间隙大小 */
  font-size: 13px;
  color: #008cff;
  width: 100%;
}

.data-item {
  display: flex;
  align-items: center;
}

.data-label {
  margin-right: 5px;
  font-weight: bold;
}

  </style>